<script lang="ts" setup>
import { onMounted, ref } from 'vue';
import { KeyValues } from '../../utils/types';
import { FormInstance, FormItemRule } from 'element-plus';
import { plugTypes } from '../../utils'

const props = defineProps<{
  row?: any
}>()

const emit = defineEmits(['close', 'submitted'])

const form = ref<KeyValues>({
  statuType: 0
})

const formRef = ref<FormInstance>()

const rules: { [k: string]: FormItemRule } = {
  plugName: { required: true, message: '请输入插件名称' },
  plugType: { required: true, message: '请选择插件类型' },
  statuType: { required: true, message: '请选择状态' },
  moban: { required: true, message: '请输入模版' }
}

const close = () => emit('close')

const onOk = async () => {
  await formRef.value.validate()
  emit('submitted', { form: form.value })
}

onMounted(() => {
  if (props.row) {
    form.value = { ...props.row }
  }
})
</script>

<template>
  <ElDialog ref="dialogRef" title="编辑">
    <ElForm ref="formRef" label-width="6em" :model="form" :rules="rules">
      <ElFormItem label="插件名称" prop="plugName" >
        <ElInput v-model="form.plugName" placeholder="请输入插件名称"/>
      </ElFormItem>
      <ElFormItem label="插件类型" prop ="plugType" >
        <ElSelect clearable v-model="form.plugType">
          <ElOption v-for="_ in plugTypes" :key="_" :value="_" :label="_" />
        </ElSelect>
      </ElFormItem>
      <ElFormItem label="状态" prop="statuType">
        <ElRadioGroup v-model="form.statuType" >
          <ElRadio :label="0">启用</ElRadio>
          <ElRadio :label="1">禁用</ElRadio>
        </ElRadioGroup>
      </ElFormItem>
      <ElFormItem label="配置模版" prop="moban">
        <ElInput v-model="form.moban" type="textarea" :autosize="{ minRows: 3 }" placeholder="请输入配置模版" />
      </ElFormItem>
    </ElForm>
    <template #footer>
      <ElButton @click="close">取消</ElButton>
      <ElButton type="primary" @click="onOk">确定</ElButton>
    </template>
  </ElDialog>
</template>
